<template>
  <div id="app">
    <my-tree
      :data.sync="data"
      :fileDrop="fileDrop"
      :diectoryDrops="diectoryDrops"
      :delete="deleteFn"
    ></my-tree>
  </div>
</template>

<script>
import { getTreeList } from "./api.js";
import myTree from "./components/myTree.vue";
export default {
  name: "App",
  components: { myTree },
  data() {
    return {
      data: [],
      fileDrop: [
        {
          text: "rm",
          value: "删除文件",
        },
      ],
      diectoryDrops: [
        {
          text: "rn",
          value: "修改名字",
        },
        {
          text: "rm",
          value: "删除文件夹",
        },
      ],
    };
  },
  async mounted() {
    let { data } = await getTreeList();
    data.parent.forEach((ele) => {
      ele.type = "parent";
    });
    this.data = [...data.parent, ...data.child];
  },
  methods: {
    deleteFn() {
      // 这个方法必须返回一个promise
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 3000);
      });
    },
  },
};
</script>

<style>
</style>
